<template>
    <div>
        <div>
            <h1>人工管理列表 --- {{ this.$store.state.count }}</h1>
            <h1>人工管理列表 --- {{ this.$store.getters.countSqrt }}</h1>
            <button @click="incr()"> 点我增加共享数据中的 count </button>
        </div>
        <table border="1" width="100%">
            <tr class="aa">
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>薪资</th>
                <th>操作</th>
            </tr>

            <tr v-for="(user, index) in users" :key="user.id">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.age }}</td>
                <td>{{ user.salary }}</td>
                <td>
                    <button @click="delEmp(user.id)">删除</button>
                    <button @click="updateInfo(user)">修改</button>
                </td>
            </tr>
        </table>
        <div>
            <div v-show="user.id">
                <span>编号:</span>
                <input type="text" v-model="user.id" />
            </div>
            <div>
                <span>姓名:</span>
                <input type="text" v-model="user.name" />
            </div>
            <div>
                <span>年龄:</span>
                <input type="text" v-model="user.age" />
            </div>
            <div>
                <span>薪资:</span>
                <input type="text" v-model="user.salary" />
            </div>
            <button @click="saveOrUpdate()">保存/修改</button>
        </div>
    </div>
</template>

<script>

import instance from '../../utils/request';

export default {
    name: "Users",
    data() {
        return {
            users: [],
            user: {}
        };
    },
    methods: {
        incr() {
            this.$store.commit('incrCount');
        },
        //保存或修改
        saveOrUpdate() {
            //发送 axios 请求
            instance.post("/user/add_or_update", this.user).then(success => {
                if (success.data.code == 200) {
                    //查询所有数据展示到列表
                    this.getEmpList();
                    //清空数据列表
                    this.user = {};
                } else {
                    alert("很抱歉，保存失败，原因：" + success.data.msg);
                }
            }).catch(error => {
                console.log(error);
            });
        },
        //获取列表信息
        getEmpList() {
            instance.get("/user/list").then(success => {
                if (success.data.code == 200) {
                    this.users = success.data.data;
                } else {
                    alert("获取失败，原因：" + success.data.msg);
                }
            }).catch(error => {
                console.log(error);
            })
        },
        //删除指定用户信息
        delEmp(id) {
            instance.get("/user/del?id=" + id + "").then(success => {
                if (success.data.code != 200) {
                    alert("删除失败，原因：" + success.data.msg);
                    return;
                }
                //获取列表
                this.getEmpList();
            }).catch(error => {
                console.log(error);
            })
        },
        updateInfo(user) {
            //将信息写入到 input 中
            this.user = user;
        }
    },
    created() {
        this.getEmpList();
    }
};
</script>

<style scoped>
.aa {
    background: greenyellow;
}
</style>
